<template>
    <el-container>
        <el-header class="header" ><div style="display: flex"><h1 class="a">云溪商城 </h1><h1 @click="back" class="b">后台管理</h1></div></el-header>
        <el-main align="center">
            <div class="item">
                <div  class="img" v-for="item in table" >

                    <div align="center" class="ppp"><el-image :src="item.image" style="width: 200px; height: 200px" > </el-image></div>
                    <div align="center">{{item.name}}</div>
                    <div align="center">价格：<el-tag type="success">{{item.price}}</el-tag></div>
                    <div align="center">
                    <template>
                        <el-popconfirm
                                title="确定要加入购物车吗？"
                                @onConfirm="onConfirm(item)"
                        >
                            <el-button slot="reference">加入购物车</el-button>
                        </el-popconfirm>
                    </template>
                    </div>
                </div>
            </div>

            <el-pagination
                    @size-change="sizeChangeHandle"
                    @current-change="currentChangeHandle"
                    :current-page="pageIndex"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageSize"
                    :total="totalPage"
                    layout="total, sizes, prev, pager, next, jumper"
                    align="center">
            </el-pagination>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "shop",
        data () {
            return {
                dataForm: {
                    key: ''
                },
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalPage: 0,
                dataListLoading: false,
                dataListSelections: [],
                addOrUpdateVisible: false,
                table:''
            }
        },
        created() {
         this.getlist()
        },
        methods:{
            getlist()
            {
                this.$http({
                    url: this.$http.adornUrl('/yunxi/tproduct/listshop'),
                    method: 'get',
                    params: this.$http.adornParams({
                        'page': this.pageIndex,
                        'limit': this.pageSize,
                        'key': this.dataForm.key,
                    })
                }).then(res=>{ this.table= res.data.page.list
                    this.totalPage = res.data.page.totalCount

                })
            },
            sizeChangeHandle (val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle (val) {
                this.pageIndex = val
                this.getlist()
            },
            sklip(id)
            {
                console.log(id)
                this.$router.push({path:'/detail',query:{id:id}})
            },
            onConfirm(item)
            {

                this.$http({
                    url: this.$http.adornUrl(`/yunxi/torder/save`),
                    method: 'post',
                    data: this.$http.adornData({
                        'no':item.id,
                        'customerId': sessionStorage.getItem("id"),
                        'businessId': item.businessId,
                         'price': item.price,
                        'createDate': new Date(),
                        'status': 1
                    })
                }).then(res=>{
                    this.$message.success("加入购物车成功")
                })
            },
            back()
            {
                this.$router.push("/home")
            }
        }
    }
</script>

<style >
    .header{
        background-color: #545c64;
        height: 100%;
    }
.item{

     display: flex;
   flex-wrap: wrap;
}
.img{

    width: 250px;
    height: 300px;
    padding: 15px;


}
    .ppp{
        cursor:pointer;
    }
    .a{
        margin-left: 700px;
    }
    .b{
        margin-left: 550px;
        color: #fff;
    }
</style>